<template>
    <div class="local_box">
        <el-card class="box-card">
            <div class="title" slot="header">
                {{detail.title}}
            </div>
            <div class="ip">
                数据库地址 ：{{detail.ip}}
                <el-button style="float: right; padding: 3px 0" type="text" @click="openFile">打开</el-button>
            </div>
        </el-card>
        <br>
        <br>
        <el-card class="box-card">
            <div class="title" slot="header">
                项目列表
                <el-button style="float: right; padding: 3px 15px" icon="el-icon-plus" type="text" @click="newProject">
                    创建项目
                </el-button>
                <el-button style="float: right; padding: 3px 0" icon="el-icon-refresh" type="text" @click="getProjects">
                    刷新
                </el-button>
            </div>
            <el-table :data="projectList" style="width: 100%">
                <el-table-column prop="title" label="项目名称"></el-table-column>
                <el-table-column prop="createTime" :formatter="formatterDate" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-video-play" @click="openWindows(scope.row)" title="打开项目窗口"></el-button>
                        <el-button size="mini" type="warning" icon="el-icon-edit" @click="editProject(scope.row)" title="编辑项目信息">
                        </el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteProject(scope.row)" title="删除项目">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-drawer :title="projectEdit.title ? '编辑项目' : '新建项目'" :wrapperClosable="false" :direction="'ltr'" destroy-on-close size="700px" :visible.sync="editBox">
            <editProject :closeEvent="closeEdit" :projectData="projectEdit"></editProject>
        </el-drawer>
    </div>
</template>
<script>
    const { shell } = require('electron');

    import editProject from './editLocalProject';
    export default {
        components: {
            editProject
        },
        data() {
            return {
                detail: {
                    serviceId: 'root',
                    title: '本地服务',
                    ip: window.DB.fileFullPath,
                    unDelete: true,
                    unEdit: true,
                },
                editBox: false,
                projectList: [],
                projectEdit: {
                    title: '',
                    description: '',
                },
            }
        },
        methods: {
            formatterDate(row, column, cellValue, inde) {
                return this.$moment(cellValue).format("YYYY-MM-DD");
            },
            closeEdit() {
                this.editBox = false;
                this.projectEdit = {
                    title: '',
                    description: '',
                };
                this.getProjects();
            },
            editProject(data) {
                this.projectEdit = data;
                this.$nextTick(() => {
                    this.editBox = true;
                });
            },
            newProject() {
                this.projectEdit = {
                    title: '',
                    description: '',
                };
                this.$nextTick(() => {
                    this.editBox = true;
                });
            },
            getProjects() {
                window.action.localProjects().then((res) => {
                    this.projectList = res;
                });
            },
            openFile() {
                shell.showItemInFolder(this.detail.ip)
            },
            openWindows(data) {
                this.$electron.ipcRenderer.send('open-content-window', JSON.stringify({
                    service: this.detail,
                    project: data,
                }));
            },
            deleteProject(data) {
                var ans = this.$confirm('是否删除项目 ' + data.title + ' ？');
                if (ans) {
                    window.action.deletelocalProject(data.projectId).then((res) => {
                        if (res) {
                            this.$alert('删除成功');
                            this.getProjects();
                        };
                    });
                };
            },
        },
    }


</script>
<style scope>

.local_box { padding:20px; background: #fff; position: absolute; 
    top: 20px;
    left: 0px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden; 
 } 


</style>